<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Skinning a Panel with Custom CSS: Introduction</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<!-- link rel="stylesheet" type="text/css" href="../../build/container/assets/container.css" -->
<!-- link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="../../build/container/container.js"></script>

<!--there is no custom header content for this example-->

</head>

<body class=" ">

<h1>Skinning a Panel with Custom CSS: Introduction</h1>


<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<style>
	#example {height:20em;}

	/* Aqua Panel Skin CSS */
	.window12 { position:fixed; z-index: 2; width:1px;left: 39px; top: 129px; visibility: visible; }
	.panel12 { position:relative; border:none; overflow:visible; background-color:transparent; }

	 .container-close { position:absolute;top:1px; left:4px; height:14px; width:8px; 
	                    background-image:url(../assets/img/aqua-hd-close.gif); 
	                    background-repeat: no-repeat;
	                    }
	 .container-close:hover { background-image:url(../assets/img/aqua-hd-close-over.gif); }

	 .hd12 { padding:0; border:none; background:transparent url(../assets/img/aqua-hd-bg.gif); color:#000; height:14px; margin-left:7px; margin-right:7px; text-align:center; overflow:visible; }
	 .hd12 span {vertical-align:top; line-height:12px; }
	 .hd12 .tl { width:7px; height:14px; top:0; left:0; background:transparent url(../assets/img/aqua-hd-lt.gif); position:absolute; }
	 .hd12 .tr { width:7px; height:14px; top:0; right:0; background:transparent url(../assets/img/aqua-hd-rt.gif); position:absolute; }

	 .bd12 { overflow:hidden; padding:4px; border:1px solid #aeaeae; background-color:#FFF; }
	 .ft12 { font-size:75%; color:#666; padding:2px; overflow:hidden; border:1px solid #aeaeae; border-top:none; background-color:#dfdfdf; }
	 .window12 .windowTitle {height:5px;font-size:75%;}  
</style>


<div class="window12"  >
	<div id="panel12__" class="panel12" style="visibility: inherit; width: 300px;">
			<div id="myPanel_h" class="hd12" style="cursor: move;">
				<div class="tl"></div>
				<span class="windowTitle">Panel from Markup</span>
				<div class="tr"></div><span class="container-close"></span>
			</div>
		<div class="bd12">This is a Panel that was marked up in the document.</div>
		<div class="ft12">End of Panel</div>
		
	</div>

</div> <!-- myPanel_c -->


<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>